<script setup lang="ts">
import type Typings from "@/typings";
import { defineOptions } from "vue";

defineOptions({
  name: "menu-item",
});

interface PropType {
  data: Partial<Typings.Menu.props>;
}

withDefaults(defineProps<PropType>(), {
  data: () => ({}),
});
</script>

<template>
  <el-sub-menu :index="data.path" v-if="data.children?.length">
    <template #title>
      <xt-icon v-if="data.icon" class="!mr-[4px]" :icon="data.icon" />
      <span>{{ data.title }}</span>
    </template>

    <menu-item v-for="menu in data.children" :key="menu.path" :data="menu" />
  </el-sub-menu>
  <el-menu-item :index="data?.path" v-else>
    <xt-icon v-if="data.icon" class="!mr-[4px]" :icon="data.icon" />
    <template #title>{{ data.title }}</template>
  </el-menu-item>
</template>

<style lang="scss" scoped></style>
